<template>
  <view class="couponGiveto">
    <view class="bind-num">请选择需要转赠的卡（{{ payInfo.num }}张）</view>
    <view class="bind-box">
      <block v-for="(item, index) in tableData" :key="index">
        <view :class="'coupon-li flex' + item.check ? '': 'coupon-use'" :style="'opacity: '+ item.check ? 1 : 0.5" @tap="choose(index)">
          <view :class="'coupon-text ' + currentTab ? 'use-text':''">
            <view class="coupon-term">{{ item.name }}</view>
            <view class="coupon-time">{{ item.startTime }}至{{ item.endTime }}使用</view>
          </view>
          <view class="coupon-text2 flex">
            <view class="coupon-money">￥<text class="coupon-num">{{ item.redeemMoney }}</text></view>
            <view v-if="currentTab == 0" class="coupon-but">未使用</view>
            <view v-if="currentTab == 1" class="coupon-but use-text">已使用</view>
            <view v-if="currentTab == 2" class="coupon-but use-text">已过期</view>
          </view>
          <view :class="currentTab==0 ? 'coupon-new':''" />
        </view>
      </block>
    </view>

    <view class="foot">
      <view class="left-wrapper flex">
        <view class="count-txt">已选择：</view>
        <view class="count-num">￥{{ payInfo.money }}</view>
        <view class="count-txt">（共{{ payInfo.num }}张）</view>
      </view>
      <view class="flex" bindtap="comfirmgiveto">
        <view v-if="payInfo.num === 0" class="pay-btn" style="opacity: 0.5;background-color: grey;">立即转赠</view>
        <view v-else class="pay-btn" style="opacity: 1;background-color: #2B2B2B;">立即转赠</view>
      </view>
    </view>
  </view>
</template>
<script>
import { pointCouponEnableList } from '@/api/api1'
const util = require('@/utils/util')
export default {
  components: {},
  data() {
    return {
      tableData: []
    }
  },
  computed: {
    userInfo() {
      return this.store.getters.userInfo
    },
    payInfo() {
      let num = 0
      let money = 0.00
      var data = []
      this.tableData.map(x => {
        if (x.check) {
          num++
          money = util.accAdd(money, Number(x.redeemMoney))
          data.push(x)
        }
      })
      return {
        money: money,
        num: num,
        data: data
      }
    }
  },
  onLoad() {
    this.loadEnable()
  },
  onShow() {
    this.loadEnable()
  },
  onReachBottom() {
  },

  methods: {
    loadEnable() {
      const that = this
      wx.showLoading({
        title: '加载我的券...'
      })
      pointCouponEnableList({
        cardNo: that.userInfo.cardNo
      }).then(res => {
        if (!res) {
          return wx.hideLoading()
        }
        wx.hideLoading()
        const tableData = res.data.map(data => {
          const myCoupon = data
          myCoupon.check = false
          return myCoupon
        })
        console.info('未使用券列表数据：', tableData)
        that.tableData = tableData
      })
    },
    choose(index) {
      this.tableData[index].check = !this.tableData[index].check
    },
    comfirmgiveto() {
      const that = this
      if (that.payInfo.num === 0) {
        return util.Tips({ title: '请选择转赠券！' })
      }
      uni.$u.route('/pages/coupon/couponGivetoConfirm/couponGivetoConfirm', {
        item: that.payInfo
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100%;
  flex: 1;
  font-size: 32rpx;
  font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
  overflow: hidden;
}

.flex {
  display: flex;
}

.container .bind-num {
  line-height: 100rpx;
  padding-left: 48rpx;
  font-size: 33rpx;
  letter-spacing: 2rpx;
}

.bind-box {
  margin: 0 36rpx 0 36rpx;
}
.bind-box .bind {
  position: relative;
  z-index: 2;
  margin: 0 20rpx 40rpx 20rpx;
  height: 260rpx;
  width: 95%;
  border-radius: 12rpx;
}

.bind .top {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 150rpx;
  background: #f9be52;
  border-top-left-radius: 12rpx;
  border-top-right-radius: 12rpx;
}

.bind .bottom {
  position: absolute;
  z-index: 0;
  top: 140rpx;
  width: 100%;
  height: 120rpx;
  background: #ffffff;
  border-bottom-left-radius: 12rpx;
  border-bottom-right-radius: 12rpx;
  box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.1);
}

.bind .money {
  position: absolute;
  z-index: 2;
  top: 8%;
  left: 6%;
  font-family: PingFang, PingFang-SC;
  color: #ffffff;
  font-size: 42rpx;
  font-weight: 600;
  letter-spacing: 2rpx;
}

.bind .no {
  position: absolute;
  z-index: 2;
  top: 38%;
  left: 6%;
  font-family: PingFang, PingFang-SC;
  color: #ffffff;
  font-size: 31rpx;
  font-weight: 500;
  letter-spacing: 2rpx;
}

.bind .validity {
  position: absolute;
  z-index: 2;
  top: 69%;
  left: 3%;
  font-family: PingFang, PingFang-SC;
  font-size: 30rpx;
  font-weight: 600;
  letter-spacing: 2rpx;
}

.bind .txt {
  position: absolute;
  z-index: 2;
  top: 69%;
  right: 3%;
  font-size: 30rpx;
  font-weight: 600;
  letter-spacing: 2rpx;
}

.bind .image {
  position: absolute;
  z-index: 2;
  width: 68rpx;
  height: 56rpx;
  top: 11%;
  right: 6%;
}

.bind .checked {
  position: absolute;
  z-index: 2;
  width: 96rpx;
  height: 96rpx;
  top: 32%;
  left: 48%;
}

/* 表单底 */
.foot {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 140rpx;
  background: #ffffff;
  box-shadow: 0 -4rpx 26rpx 0 rgba(0, 0, 0, 0.11);
}

.foot .left-wrapper {
  flex: 1;
  align-items: center;
}

.foot .pay-btn {
  font-size: 40rpx;
  width: 275rpx;
  font-family: Courier, Calibri, '黑体';
  text-align: center;
  line-height: 140rpx;
  color: #fff;
}

.count-txt {
  font-size: 28rpx;
  font-family: PingFang, PingFang-SC;
  font-weight: 500;
  color: #000000;
  letter-spacing: 2rpx;
}

.count-num {
  font-size: 46rpx;
  font-family: PingFang, PingFang-SC;
  font-weight: 600;
  color: #e27844;
  letter-spacing: 1px;
}

.coupon-li {
  background-image: url('');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 678rpx;
  height: 209rpx;
  margin-bottom: 20rpx;
  padding-top: 1rpx;
  justify-content: space-between;
  color: #ffffff;
  position: relative;
}

.coupon-text {
  color: #000000;
  width: 380rpx;
  height: 157rpx;
  border: 1rpx solid #ffc29c;
  border-radius: 8rpx;
  margin: 24rpx 32rpx;
  text-align: center;
}

.coupon-term {
  margin-top: 38rpx;
  font-size: 30rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coupon-time {
  font-size: 22rpx;
  margin-top: 15rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coupon-money {
  font-size: 46rpx;
  margin-top: -7rpx;
}

.coupon-num {
  font-size: 60rpx;
}

.coupon-text {
  padding-right: 23rpx;
}

.coupon-but {
  font-size: 18rpx;
  border: 1rpx solid #ffb9a8;
  border-radius: 20rpx;
  text-align: center;
  width: 112rpx;
  height: 37rpx;
  line-height: 36rpx;
  margin: 7rpx auto 0 auto;
}

.coupon-new {
  background-image: url('');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 131rpx;
  height: 135rpx;
  position: absolute;
  top: -33rpx;
  right: -31rpx;
}
.coupon-use {
  background-image: url('');
}

.use-text {
  border: 1rpx solid #e9e9e9;
}

.use-but {
  background-color: #aaa9a9;
  border: 1rpx solid #aaa9a9;
  color: #c4c4c4;
}

.loading {
  font-size: 30rpx;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  justify-content: center;
}

.loadingpic {
  font-size: 40rpx;
  margin: 4rpx 20rpx 0 0;
}

.coupon-text2 {
  width: 200rpx;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
</style>
